<template>
  <div class="tech-carousel">
    <div class="background-layers">
      <img 
        class="map-layer map-base" 
        :src="mapImage" 
        alt="地图背景"
      />
      <img 
        class="map-layer map-overlay" 
        :src="lbxImage" 
        alt="装饰层"
      />
    </div>
    <div class="carousel-container">
      <!-- 3D旋转木马 -->
      <section class="carousel-3d" @mouseenter="pauseAnimation" @mouseleave="resumeAnimation">
        <div 
          v-for="(item, index) in carouselItems" 
          :key="index" 
          class="carousel-item"
          :style="getItemTransform(index)"
          @click="handleItemClick(item)"
        >
          <button class="carousel-button">
            <div class="button-icon">{{ item.icon }}</div>
            <div class="button-text">{{ item.text }}</div>
          </button>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import mapImage from '../../assets/map.png'
import lbxImage from '../../assets/lbx.png'

const router = useRouter()

// 旋转木马数据
const carouselItems = ref([
  { icon: '🏠', text: '首页', route: '/' },
  { icon: '📊', text: '中国数据', route: '/chinaMap' },
  { icon: '🌐', text: '3D地图', route: '/chinaMap3D' },
  { icon: '👥', text: '用户管理', route: '/users' },
  { icon: '📝', text: '内容管理', route: '/posts' },
  { icon: '📈', text: '统计分析', route: '/analytics' }
])

// 获取每个项目的3D变换
const getItemTransform = (index: number) => {
  const totalItems = carouselItems.value.length
  const angle = (360 / totalItems) * index
  return {
    transform: `rotateY(${angle}deg) translateZ(300px)`
  }
}

// 暂停动画
const pauseAnimation = () => {
  const carousel = document.querySelector('.carousel-3d') as HTMLElement
  if (carousel) {
    carousel.style.animationPlayState = 'paused'
  }
}

// 恢复动画
const resumeAnimation = () => {
  const carousel = document.querySelector('.carousel-3d') as HTMLElement
  if (carousel) {
    carousel.style.animationPlayState = 'running'
  }
}

// 处理按钮点击
const handleItemClick = (item: any) => {
  if (item.route) {
    router.push(item.route)
  }
}
</script>

<style scoped>
.tech-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid #00d4ff;
  border-radius: 12px;
}

.background-layers {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.map-base {
  z-index: 1;
  opacity: 0.3;
}

.map-overlay {
  z-index: 2;
  opacity: 0.8;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.carousel-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}

/* 3D旋转木马容器 */
.carousel-3d {
  width: 200px;
  height: 120px;
  transform-style: preserve-3d;
  animation: carousel-rotate 15s linear infinite;
  cursor: pointer;
  /* 向前倾斜15度，增强3D效果 */
  transform: rotateX(-15deg);
}

.carousel-3d:hover {
  animation-play-state: paused;
}

@keyframes carousel-rotate {
  0% {
    transform: rotateX(-15deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-15deg) rotateY(360deg);
  }
}

/* 旋转木马项目 */
.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 按钮样式 */
.carousel-button {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.6), rgba(0, 150, 255, 0.8));
  border: 2px solid #00d4ff;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.carousel-button:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.8), rgba(0, 150, 255, 1));
  border-color: #00f4ff;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.6);
  transform: scale(1.05);
}

.button-icon {
  font-size: 24px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.button-text {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}
</style>
